<template>
  <div class="entrust">
    <!-- 代码橱窗-委托详情页 {{ route.params.id }} -->
    <div class="content">
      <!-- // 左侧文章部分 -->
      <div class="left">
        <!-- 页头 -->
        <div class="page-header">
          <el-page-header :icon="ArrowLeft" @back="handleBack">
            <template #title>
              <span>返回</span>
            </template>
            <template #content>
              <span class="text-large font-600 mr-3"> 委托详情 </span>
            </template>
          </el-page-header>
        </div>
        <!-- 委托标题 -->
        <h2 class="title">{{ entrustInfo.ent_title }}</h2>
        <div class="tag-list">
          <ul>
            <div>类目:</div>
            <li class="tag" v-for="item, index of entrustInfo.tags">{{ item }}</li>
          </ul>
        </div>
        <main>
          <!-- 委托背景 -->
          <div class="context">
            <!-- 背景 -->
            <div class="context-title">委托背景/简介</div>
            <div class="context-text">
              <p>{{ entrustInfo.ent_biography }}</p>
              <!-- 封面图片 -->
              <div>
                <el-image style="width: 200px; height: 200px" v-if="entrustInfo.ent_cover"
                  :src="'http://127.0.0.1:3000/uploads/' + entrustInfo.ent_cover" fit="fill" />
              </div>
            </div>
          </div>

          <!-- 委托介绍 -->
          <div class="introduce">
            <div class="introduce-title">委托介绍</div>
            <p v-html="entrustInfo.ent_content"></p>
            <!-- 委托图片列表 -->
            <!-- <el-image style="width: 100px; height: 100px" :src="item.url" fit="fill"
              v-for="item, index of entrustInfo.picUrlList" :key="item.id" /> -->
          </div>
          <!-- 委托价格 -->
          <div class="money">
            <div class="money-title">委托价格</div>
            <p>
              委托定金: <span style="color: #ff6d02;">{{ (parseFloat(entrustInfo.ent_price) * 0.3).toFixed(2) }}</span> 币
            </p>
            <p>
              委托尾款: <span style="color: #ff6d02;">{{ (parseFloat(entrustInfo.ent_price) -
                parseFloat((entrustInfo.ent_price)) * 0.3).toFixed(2) }}</span> 币
            </p>
          </div>
          <!-- 对委托的操作 购买/下载 -->
          <el-divider />
          <div class="btnDiv">
            <div class="btnList-title">委托操作</div>
            <div class="btnList">
              <el-button type="primary" round @click="handleToAccept">接取委托</el-button>
              <el-button type="success" round @click="handleDownload">下载委托合同文件</el-button>
            </div>
          </div>
        </main>
      </div>
      <!-- // 右侧用户信息部分 -->
      <div class="right">
        <div class="user-info">
          <UserInfo :showAuthor="true" :targetUserId="targetUserId" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from "vue"
import { useRoute, useRouter } from 'vue-router'
import UserInfo from '@/components/UserInfo/index.vue'
import Service from '@/utils/axios'
import { ArrowLeft } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from "element-plus";
import "element-plus/es/components/message/style/css"; // 按需引入ElMessage样式失败，手动引入
import "element-plus/es/components/message-box/style/css";
//pinia
import { useUserStore } from "@/store/user";
const userStore = useUserStore();

// 路由
const route = useRoute();
const router = useRouter();
console.log(route.params.id)
const handleBack = () => {
  router.back();
}

let entrustInfo = reactive<any>({})
let targetUserId = '';

// 请求项目详情数据
const getEntrustDetail = async () => {
  await Service.post('/bkapi/entrustInfo/getEntrustinfoById', {
    id: route.params.id,
  })
    .then(res => {
      // entrustInfo = res?.data?.data?.data
      Object.assign(entrustInfo, res?.data?.data)
      console.log(entrustInfo)
      console.log(res?.data)
      // entrustInfo.tags = entrustInfo.tags == '' ? '' : entrustInfo.tags.split(',')
      entrustInfo.tags = JSON.parse(entrustInfo.tags);
      targetUserId = entrustInfo.users_model.username;
      console.log('targetUserId', targetUserId)
      // entrustTitle = res?.data?.data?.entrustTitle;
      // coverUrl = res?.data?.data?.coverUrl;
      // entrustTagList = res?.data?.data?.entrustTagList;
      // entrustContext = 
    })
}
// 获取项目详情
getEntrustDetail();

// 确认接取委托
const handleToAccept = () => {
  ElMessageBox.confirm(
      '确定要接取委托吗？接取委托后取消接取将降低信用度!',
      '确认信息',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        cancelButtonClass: 'display',
        // type: 'warning',
      }
    )
      .then(() => {
        handleAccept()
      })
      .catch(() => {
      })
}

// 接取委托方法
const handleAccept = () => {
  console.log('接取委托')
  Service.post('/bkapi/entrustAcceptInfo/postEntIdToBuy', {
    ent_id: entrustInfo.ent_id,
    userInfo: JSON.stringify({
      userId: localStorage.getItem('userid'),
      username: localStorage.getItem('username'),
    })
  })
    .then((res: any) => {
      console.log('res', res.data)
      if (res.data.status === 200 && res.data?.data.user_id === localStorage.getItem('userid')) {
        ElMessage({
          showClose: true,
          message: '接取成功!',
          type: 'success',
        })
        Service.get('/bkapi/userinfo/getUserinfoByUsername', {
          params: {
            username: localStorage.getItem('username'),
          }
        }).then((res2: any) => {
          if (res2.data.status === 200) {
            userStore.setAvatarUrl(res2.data.data.user_pic);
            userStore.setUserInfo(JSON.stringify(res2.data.data));
            userStore.setUserId(res2.data.data.user_id)
          }
        })
      } else {
        ElMessage({
          showClose: true,
          message: res.data?.message,
          type: 'error',
        })
      }
    })
}
// 下载方法
const handleDownload = () => {
  console.log('下载')
  // Service.post('/bkapi/projectBuyInfo/postProIdUserIdToBy', {
  //   proId: projectInfo.pro_id,
  //   userId: localStorage.getItem('userid'),
  // })
  //   .then((res: any) => {
  //     console.log('BuyInfores', res)
  //     if (res.data?.data) {
  //       if (res.data?.data.pro_id === projectInfo.pro_id) {
  //         ElMessage({
  //           showClose: true,
  //           message: '开始下载',
  //           type: 'success',
  //         })
  //       }
  //     } else {
  //       ElMessage({
  //         showClose: true,
  //         message: '未购买，请购买后下载!',
  //         type: 'error',
  //       })
  //     }
  //   })
}

onMounted(() => {
})


</script>

<style lang="less" scoped>
@border-color: #dcdfe6; //边框默认颜色

.entrust {
  margin-top: 30px;

  .content {
    display: grid;
    grid-template-columns: 3fr 1fr;
    column-gap: 1rem;

    .left {
      padding: 50px 60px 10px 60px;
      background-color: #fff;
      border-radius: 10px;
      box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);
      position: relative;

      .page-header {
        position: absolute;
        top: 10px;
        left: 10px;
      }

      h2 {
        font-size: 22px;
        // border-left: 4px solid #ff6d02;
        // padding-left: 15px;
      }

      .tag-list {
        padding-top: 20px;
        color: #999999;

        ul {
          display: flex;
          justify-content: flex-start;
          font-size: 16px;

          div:first-child {
            padding-right: 10px;
          }

          li {
            position: relative;
            padding: 0 10px;
            font-size: 16px;

            &:not(:last-child)::after {
              position: absolute;
              right: -4px;
              content: "/";

            }
          }


        }
      }

      main {

        .context {

          .context-title {
            margin-top: 20px;
            border-left: 4px solid #ff6d02;
            padding-left: 8px;
            font-size: 18px;
          }

          .context-text {
            display: grid;
            grid-template-columns: 3fr 1fr;
            column-gap: 1rem;

            &>p {
              margin-top: 20px;
              padding: 20px;
              background: hsla(0, 0%, 78%, .3);
              border: 1px solid #c4c4c4;
              border-radius: 2px;
              color: #999;
              line-height: 28px;
              margin-bottom: 8px;
              font-size: 14px;
            }

            &>div {
              margin-top: 20px;
            }
          }
        }

        .introduce {

          .introduce-title {
            margin-top: 20px;
            border-left: 4px solid #ff6d02;
            padding-left: 8px;
            font-size: 18px;
          }

          p {
            margin-top: 20px;
            padding: 20px;
            background-color: #fff;
            border: 1px solid @border-color;
            border-radius: 10px;
          }
        }

        .money {

          .money-title {
            margin-top: 20px;
            border-left: 4px solid #ff6d02;
            padding-left: 8px;
            font-size: 18px;
          }

          p {
            padding-top: 20px;
            font-size: 20px;
            font-weight: 700;
          }
        }

        .btnDiv {
          .btnList-title {
            margin-top: 20px;
            border-left: 4px solid #ff6d02;
            padding-left: 8px;
            font-size: 18px;
          }

          .btnList {
            margin-top: 20px;
            padding: 10px 20px 20px 20px;

            display: flex;
            justify-content: center;
            align-items: center;
          }
        }


      }
    }

    // .right {}

    .comment {
      margin-top: 20px;
      padding: 20px;
      background-color: #fff;
      border: 1px solid @border-color;
      border-radius: 10px;
      box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);
    }
  }


}
</style>
<style lang="less">
@border-color: #dcdfe6; //边框默认颜色

p {
  img {
    display: block;
    width: 50%;
    margin: 0 auto;
    background-color: #fff;
    border: 1px solid @border-color;
    border-radius: 10px;
    box-shadow: 0 10px 10px 5px rgba(0, 0, 0, .1);
  }
}
</style>